<template>
  <div class="page">
    <div class="page-login">
      <div class="login-box">
        <h2 class="text-center">欢迎注册</h2>
        <form class="form">
          <ul class="nav nav-tabs">
            <li @click="handleNav('first')" class="nav-item">
              <a :class="active === 'first' ? 'active' : ''" class="nav-link" href="javascript:">验证码注册</a>
            </li>
            <li @click="handleNav('second')" class="nav-item">
              <a :class="active === 'second' ? 'active' : ''" class="nav-link" href="javascript:">密码注册</a>
            </li>
          </ul>
          <div v-show="active === 'first'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white"><i class="bi bi-phone"></i></span>
              <div :class="isShowDropdown ? 'show' : ''" @click.stop="handleToggle" class="dropdown">
                <a class="btn btn-outline-secondary dropdown-toggle" href="javascript:" role="button" data-toggle="dropdown" aria-expanded="false">{{ form.areaText }}</a>
                <div :style="{display: isShowDropdown ? 'block' : ''}" class="dropdown-menu">
                  <a v-for="item in areas" :key="item.value" @click.stop="handleSelect(item)" class="dropdown-item" href="javascript:">{{ item.text }}</a>
                </div>
              </div>
              <input v-model="form.phonenumber" :class="valid['phonenumber'] === false ? 'is-invalid' : ''" class="form-control" placeholder="请输入手机号" name="phonenumber" autocomplete="off" />
            </div>
            <div :class="valid['phonenumber'] === false ? 'is-block' : ''" class="invalid-feedback">请输入手机号</div>
          </div>
          <div v-show="active === 'first'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white"><i class="bi bi-shield-lock"></i></span>
              <input v-model="form.code" :class="valid['code'] === false ? 'is-invalid' : ''" type="text" class="form-control" name="code"
                  placeholder="请输入验证码" style="min-width: 80px">
              <span class="bsa-cursor-pointer" style="padding-left: 8px">
                <button type="button" class="btn btn-outline-secondary">获取验证码</button>
              </span>
            </div>
            <div :class="valid['code'] === false ? 'is-block' : ''" class="invalid-feedback">请输入验证码</div>
          </div>
          <div v-show="active === 'second'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white "><i class="bi bi-person"></i></span>
              <input v-model="form.username" :class="valid['username'] === false ? 'is-invalid' : ''" type="text" class="form-control" placeholder="请输入用户" name="username" />
            </div>
            <div :class="valid['username'] === false ? 'is-block' : ''" class="invalid-feedback">请输入用户</div>
          </div>
          <div v-show="active === 'second'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white"><i class="bi bi-person-lock"></i></span>
              <input v-model="form.password" :class="valid['password'] === false ? 'is-invalid' : ''" :type="isShowPass ? 'text' : 'password'" class="form-control" placeholder="请输入密码" name="password" autocomplete="off" />
              <span @click="handleChangeShow" class="input-group-text bg-white bsa-cursor-pointer">
                <i :class="isShowPass ? 'bi-eye' : 'bi-eye-slash'" class="bi"></i>
              </span>
            </div>
            <div :class="valid['password'] === false ? 'is-block' : ''" class="invalid-feedback">请输入密码</div>
          </div>
          <div v-show="active === 'second'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white"><i class="bi bi-person-lock"></i></span>
              <input v-model="form.repassword" :class="valid['repassword'] === false ? 'is-invalid' : ''" :type="isShowPass ? 'text' : 'password'" class="form-control" placeholder="请再次输入密码" name="password" autocomplete="off" />
            </div>
            <div :class="valid['repassword'] === false ? 'is-block' : ''" class="invalid-feedback">{{ message.repassword }}</div>
          </div>
          <div v-show="active === 'second'" class="mb-3">
            <div class="input-group">
              <span class="input-group-text bg-white"><i class="bi bi-shield-lock"></i></span>
              <input v-model="form.captcha" :class="valid['captcha'] === false ? 'is-invalid' : ''" type="text" class="form-control" name="captcha"
                  placeholder="请输入验证码" style="min-width: 80px">
              <img class="bsa-cursor-pointer" src="" alt="验证码" />
            </div>
            <div :class="valid['captcha'] === false ? 'is-block' : ''" class="invalid-feedback">请输入验证码</div>
          </div>
          <div class="d-grid gap-2">
            <button @click="handleSubmit" class="btn btn-primary" type="button"><i class="bi bi-box-arrow-in-right"></i> 注册</button>
          </div>
          <div class="mt-3 d-flex align-items-center justify-content-center text-xs">
            <span class="text-black-50">已有账号？</span>
            <a href="/login" class="link-success text-decoration-none">登录</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'

export default {
  components: {
    Header,
    Footer
  },

  data () {
    return {
      active: 'first',
      isShowPass: false,
      isShowDropdown: false,
      areas: [
        {value: '+86', text: '中国 +86'},
        {value: '+1', text: '美国 +1'},
        {value: '+81', text: '日本 +81'},
        {value: '+852', text: '中国香港 +852'},
        {value: '+853', text: '中国澳门 +853'},
        {value: '+886', text: '中国台湾 +886'}
      ],
      form: {
        username: '',
        password: '',
        repassword: '',
        captcha: '',
        phonenumber: '',
        code: '',
        areaText: '中国 +86',
        areaValue: '+86'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户' }
        ],
        password: [
          { required: true, message: '请输入密码' }
        ],
        repassword: [
          { required: true, message: '请再次输入密码' },
          {
            validator (rule, value, callback) {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            message: '两次密码不一样'
          }
        ],
        captcha: [
          { required: true, message: '请输入验证码' }
        ],
        phonenumber: [
          { required: true, message: '请输入手机号' }
        ],
        code: [
          { required: true, message: '请输入验证码' }
        ]
      },
      valid: {
        username: null,
        password: null,
        repassword: null,
        captcha: null,
        phonenumber: null,
        code: null
      },
      message: {
        username: null,
        password: null,
        repassword: null,
        captcha: null,
        phonenumber: null,
        code: null
      }
    }
  },

  methods: {
    // 类型切换
    handleNav (name) {
      this.active = name
    },
    handleToggle () {
      this.isShowDropdown = !this.isShowDropdown
    },
    handleSelect (item) {
      this.isShowDropdown = false
      this.form.areaText = item.text
      this.form.areaValue = item.value
    },
    // 密码切换
    handleChangeShow () {
      this.isShowPass = !this.isShowPass
    },
    // 是否验证通过
    isInValid (name) {
      let value = this.form[name]
      let rules = this.rules[name] || []
      let valid = true, message
      rules.forEach(item => {
        // 必需
        if (item.required) {
          if (!value) {
            valid = false
          }
        }
        // 自定义
        else if (typeof item.validator === 'function') {
          item.validator.call(this, item, value, function(res){
            if (res instanceof Error) {
              valid = false
              message = res.message || item.message
            }
          })
        }
      })
      return {
        valid, message
      }
    },
    // 验证
    checkValid () {
      let result = false
      let keys = ['phonenumber', 'code']
      if (this.active === 'second') {
        keys = ['username', 'password', 'repassword', 'captcha']
      }
      keys.forEach(key => {
        let value = this.isInValid(key)
        this.valid[key] = value.valid
        this.message[key] = value.message
        result = result || value
      })
      return result
    },
    // 提交
    handleSubmit () {
      let res = this.checkValid()
      if (!res) {
        return true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .login-box {
    padding: 32px;
    width: 400px;
    background: rgba(255, 255, 255, .9);
    border-radius: 10px;
  }
  .form {
    margin-top: 36px;
  }
  .nav-tabs {
    margin-bottom: 16px
  }
  .form-control::placeholder {
    color: #aaa;
  }
  .input-group {
    .dropdown {
        margin-left: -1px;
        margin-right: -1px;
      .btn {
        border-color: #ced4da;
        border-radius: 0;
        &:hover,&:focus {
          box-shadow: none;
        }
      }
    }
    .input-group-text:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      & + .form-control {
        margin-left: -1px;
        margin-right: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    .input-group-text:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    input::placeholder {
      font-size: 12px;
    }
  }
  .bsa-cursor-pointer {
    cursor: pointer;
  }
  img.bsa-cursor-pointer {
    margin-left: 8px;
    width: 120px;
    height: 38px;
  }
  .form-control {
    &:hover,&:focus {
      box-shadow: none;
    }
  }
  .form-action {
    font-size: 12px;
    .form-check-input {
      margin-top: 3px;
    }
  }
  .btn {
    display: block;
    width: 100%;
    &:hover,&:focus,&:active {
      box-shadow: none;
      outline: none;
    }
  }
  .invalid-feedback {
    padding-left: 44px;
  }
  .is-block {
    display: block;
  }
  .divider {
    position: relative;
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    background-color: #eee;
    .divider-text {
      position: absolute;
      left: 50%;
      padding: 0 20px;
      transform: translateX(-50%) translateY(-50%);
      font-weight: 500;
      color: #999;
      font-size: 12px;
      background-color: #fff;
    }
  }
  .qrcode {
    display: flex;
    justify-content: center;
    margin: 16px;
    .qrcode-img {
      padding: 8px;
      border: 1px solid #ddd;
    }
  }
  .text-xs {
    font-size: 12px;
  }
}
</style>